<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
      margin: 0;
      padding: 0;
    }

    .hot-videos{
        width: 400px;
        height: 600px;
        border: 1px solid #ccc;
        margin: 20px auto;
        position: relative;
    }

    .hot-videos .hot-header{
        width: 100%;
        height: 50px;
        /* background-color: skyblue; */
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
    }

    .hot-videos .hot-header span{
        font-size: 20px;
        font-weight: bold;
        position: relative;
        padding-left: 30px;
        margin-left: 20px;
    }

    .hot-videos .hot-header span::before{
        width: 20px;
        height: 20px;
        content: '';
        background: url("/src/img/flex/icon-play.png") no-repeat center ;
        background-size: cover;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        position: absolute;
        margin-right: 3px;
    }

    .hot-videos .hot-header a{
        font-size: 18px;
        color: black;
        text-decoration: none;
        position: relative;
        padding-right: 20px;
    }

    .hot-videos .hot-header a::before{
        width: 18px;
        height: 18px;
        content: '';
        background: url("/src/img/flex/icon-sx2.png") no-repeat center ;
        background-size: cover;
        position: absolute;
        left: -20px;
        top: 50%;
        transform: translateY(-50%);
    }

    .hot-videos .hot-list{
        width: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: center;
    }

    .hot-item{ 
        width: 350px;
        height: 95px;
        /* background-color: skyblue; */
        margin: 15px auto;
    }

    .hot-item img{
        width: 125px;
        height: 95px;
        object-fit: cover;
    }

    .hot-item .content{
        width: 220px;
        height: 95px;
        /* background-color: #ccc; */
        float: right;
    }

    .hot-item .content p{
        margin: 2px 0;
        font-size: 16px;
        color: #222;
    }

    .comment{
        color: #F04142;
        font-size: 12px;
        background-color: #FFF2F2;
        border-radius: 3px;
        padding: 2px 4px;
    }

    .video-info{
        width: 100%;
        height: 24px;
        position: relative;
    }

    .video-info span{
        display: block;
        height: 24px;
        color: #999999;
        font-size: 14px;
        line-height: 24px;
    }
    .video-info span:nth-child(2){
        float: right;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
    }

    /* PC端样式 */
    @media (min-width: 1025px) {
        .hot-videos {
            width: 600px;
            height: 800px;
        }

        .hot-item {
            width: 550px;
            height: 120px;
        }

        .hot-item img {
            width: 150px;
            height: 120px;
        }

        .hot-item .content {
            width: 380px;
            height: 120px;
        }

        .hot-item .content p {
            font-size: 18px;
        }

        .video-info span {
            font-size: 16px;
        }
    }

    /* Pad端样式 */
    @media (min-width: 768px) and (max-width: 1024px) {
        .hot-videos {
            width: 500px;
            height: 700px;
        }

        .hot-item {
            width: 450px;
            height: 110px;
        }

        .hot-item img {
            width: 140px;
            height: 110px;
        }

        .hot-item .content {
            width: 300px;
            height: 110px;
        }

        .hot-item .content p {
            font-size: 16px;
        }

        .video-info span {
            font-size: 14px;
        }
    }

    /* 移动端样式 */
    @media (max-width: 767px) {
        .hot-videos {
            width: 100%;
            height: auto;
            margin: 10px auto;
        }

        .hot-item {
            width: 90%;
            height: auto;
            margin: 10px auto;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .hot-item img {
            width: 100%;
            height: auto;
        }

        .hot-item .content {
            width: 100%;
            height: auto;
            text-align: center;
        }

        .hot-item .content p {
            font-size: 14px;
        }

        .video-info span {
            font-size: 12px;
        }
    }
</style>
<body>
    <div class="hot-videos">
        <div class="hot-header">
            <span>热门视频</span>
            <a href="">换一换</a>
        </div>
        <div class="hot-list">
            <div class="hot-item">
                <img src="/src/img/flex/toutiao-01.jpeg" alt="">
                <div class="content">
                    <p>司马南：中国与俄罗斯的底线底线底线</p>
                    <span class="comment">1万评论</span>
                    <div class="video-info">
                        <span>10.5万次播放</span>
                        <span>2天前</span>
                    </div>
                </div>
            </div>
            <div class="hot-item">
                <img src="/src/img/flex/toutiao-02.jpeg" alt="">
                <div class="content">
                    <p>无论腌什么鱼，最忌放盐 和料酒腌制，大厨教你…</p>
                    <span class="comment">1.5万评论</span>
                    <div class="video-info">
                        <span>9.5万次播放</span>
                        <span>2天前</span>
                    </div>
                </div>
            </div>
            <div class="hot-item">
                <img src="/src/img/flex/toutiao-03.jpeg" alt="">
                <div class="content">
                    <p>战后阿富汗，女孩的“愿 望”竟是这个，家中…</p>
                    <span class="comment">1万评论</span>
                    <div class="video-info">
                        <span>10.5万次播放</span>
                        <span>2天前</span>
                    </div>
                </div>
            </div>
            <div class="hot-item">
                <img src="/src/img/flex/toutiao-04.jpeg" alt="">
                <div class="content">
                    <p>上海抗议第一线！</p>
                    <span class="comment">1万评论</span>
                    <div class="video-info">
                        <span>10.5万次播放</span>
                        <span>2天前</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>